<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      * {
         padding: 0;
         margin: 0;
         list-style: none;
      }

      /* 整个aaa的css */
      .aaa {
         background-color: #acacac;
      }

      /* 头一行bbb的css */
      .bbb {
         width: 100vw;
         height: 8vh;
         background-color: #ff8a00;
         display: flex;
      }

      .bbb>div {
         display: flex;
         flex: 1;
         justify-content: center;
         align-items: center;
      }

      .bbb>div:nth-of-type(1)img {
         width: 150px;
      }

      .bbb>div:nth-of-type(1)img {
         width: 35px;
         margin-left: 25px;
      }

      /* 中间图片 css */
      .ccc {
         width: 100vw;
         height: 40vh;
         position: relative;
         display: flex;
         align-items: flex-end;
         justify-content: center;
         background-image: url(./imges/banner1.png);
         background-size: 100% 100%;
      }

      .ccc>input {
         width: 75vw;
         height: 5vh;
         border-radius: .5rem;
         border: .15rem solid black;
         margin-bottom: 0.5rem;
         padding-left: 2.5rem;
      }

      .ccc>img {
         width: 8vw;
         height: 4vh;
         left: 1.5rem;
         bottom: 0.7rem;
         position: absolute;
      }

      /* 第三个div的css */
      .ddd {
         width: 100vw;
         display: flex;
         background-color: #ff8a00;
      }

      .ddd>div {
         text-align: center;
         color: white;
         font-size: .8rem;
         margin: .45rem;
      }

      .ddd>div>img {
         width: 20vw;
      }

      /* 第四个大图片的css */
      .qqq {
         width: 100vw;
         height: 40vh;
         background-image: url(./imges/banner2.png);
         background-size: 100% 100%;
      }

      /* 第五个div css */
      .www {
         width: 92vw;
         padding: 0.3rem 0 0.3rem 1.5rem;
         color: white;
         background-color: #ff8a00;
      }

      .www>p {
         font-weight: bold;
         font-size: 1.1rem;
      }

      .www>span {
         font-weight: bold;
         font-size: .7rem;
      }

      /* 第六个css */
      .eee{
         width: 100vw;
         background-color: aliceblue;
         display: flex;
         flex-direction: column;
         align-items: center;
      }

      .e1{
         width: 90vw;
         height: 25vh;
         display: flex;
         align-items: center;
         border-bottom: 2px solid red;
      }

      .e1> div:nth-of-type(1) {
         flex:1;
      }

      .e1>div:nth-of-type(1)>img{
         width:100%;
      }

      .e1>div:nth-of-type(1) {
         flex:2;
         background-color: aliceblue;
         padding-left: .8rem;
      }

      .e1>div:nth-of-type(1)>p {
         font-weight: bold;
         line-height: 2rem;
         font-size: 1rem;
      }

      .e1>div:nth-of-type(1)>span {
         font-size: .8rem;
         line-height: 1.5rem;
      }

      .e1>div:nth-of-type(1)>span:nth-of-type(2) {
         float: right;
         color: #ff8a00;
      }

      .e1>div:nth-of-type(1)>span:nth-of-type(3) {
         color: #716f6f;
      }

      .e1>div:nth-of-type(1)>span:nth-of-type(4) {
         color: #716f6f;
         float: right;
      }

      .e1>div:nth-of-type(1)>span:nth-of-type(5) {
         padding: 2px;
         color: #4f616e;
         background-color: #bde0f8;
      }

      .e1>div:nth-of-type(1)>span:nth-of-type(6) {
         background-color: #bde0f8;
         color: #4f616e;
         padding: 2px;
         margin-left: 15px;
      }

      .e1:nth-of-type(3) {
         border-bottom: none;
      }
      /* 第七个css */
      .rrr{
         width: 100vw;
         background-color: white;
         margin-top: 15px;
      }
      .rrr>div:nth-of-type(1){
         border-bottom: 2px solid #ff8a00;
         display: flex;
      }
      .rrr>div:nth-of-type(1)>span{
         flex: 1;
         font-size: 1.3rem;
         text-align: center;
         line-height: 3rem;
      }
      .rrr>div:nth-of-type(1)>span:nth-of-type(1){
            border-bottom: 4px solid #ff8a00;
            color:#ff8a00 ;
        }
        .rrr>div:nth-of-type(2){
         display: flex;
        }
        .rrr>div:nth-of-type(2)>ul{
         margin-top: .8rem;
         flex: 1;
         margin-left: 1rem;
        }
        .rrr>div:nth-of-type(2)>ul>li{
         font-size: .8rem;
         height:1.7rem;
        }

        /* 第八个css */
        .ttt{
         width: 100vw;
         background-color: #2f3130;
         color: #737373;
        }
        .ttt>div:nth-of-type(1){
         width: 90vw;
         margin: auto;
         border-bottom: 1px solid #737373;
        }
        .ttt>div:nth-of-type(1)>span{
         line-height: 2.5rem;
        }
        .ttt>div:nth-of-type(2){
         height: 15vh;
         display: flex;
         align-items: center;
        }
        .ttt>div:nth-of-type(2)>div{
         flex:1;
         margin-left: 1rem;
         display: flex;
        }
        .ttt>div:nth-of-type(2)>div>div:nth-of-type(2){
         margin-left: 1.1rem;
        }
   </style>
</head>

<body>
   <!-- 整个aaa -->
   <div class="aaa">
      <!-- 头一行bbb -->
      <div class="bbb">
         <div>
            <img src="./imges/logo.jpg" alt="">
         </div>
         <div>
            <img src="./imges/my.jpg" alt="">
            <img src="./imges/xiazai.jpg" alt="">
         </div>
      </div>
      <!-- 中间图片 -->
      <div class="ccc">
         <img src="./imges/seach.jpg" alt="">
         <input type="text" placeholder="输入小区找房">
      </div>
      <!-- 第三个div -->
      <div class="ddd">
         <div>
            <img src="./imges/index_03.png" alt=""><br>
            <span>二手房</span>
         </div>
         <div>
            <img src="./imges/index_05.png" alt=""><br>
            <span>新房 </span>
         </div>
         <div>
            <img src="./imges/index_07.png" alt=""><br>
            <span>租房</span>
         </div>
         <div>
            <img src="./imges/index_09.png" alt=""><br>
            <span>卖方</span>
         </div>
      </div>
      <!-- 第四个大图片 -->
      <div class="qqq">
      </div>
      <!--  第五个div -->
      <div class="www">
         <p>热门房源</p>
         <span>Hot house</span>
      </div>
<!-- 第六个 -->
      <div class="eee">
         <div class="e1">
            <img src="./imges/img1.jpg" alt="">
            <div>
            <p>文化部中间一层...</p>
            <span>2室一厅96南北</span><span>1105万</span><br>
            <span> 红庙北里</span><span>14268元/平</span><br>
            <span>学区房</span>
            <span>赌房</span>
         </div>
         </div>  
         <div class="e1">
            <img src="./imges/img2.png" alt=""> <div>
            <p>光大水墨&nbsp;精装复式...</p>
            <span>2室1厅96m³南北</span> <span>208万</span><br>
            <span> 光大水墨</span><span>14268元/平</span><br>
            <span>学区房</span>
            <span>独家</span>
         </div>
         </div>
         <div class="e1">
            <img src="./imges/img3.png" alt=""><div>
            <p>文化部中间一层...</p>
            <span>2室一厅96南北</span> <span>320万</span><br>
            <span>北京新天地</span><span>14268元/平</span><br>
            <span>地铁房</span>
            <span>独家</span>
         </div>
         </div>
      </div>
<!-- 第七个div -->
      <div class="rrr">
         <div>
            <span>热门关注</span>
            <span>友情链接</span>
         </div>
         <div>
            <ul>
               <li>北京二手房</li>
               <li>北京二手房价</li>
               <li>海淀区日租区</li>
               <li>朝阳区新房</li>
            </ul>
            <ul>
               <li>北京找房无忧</li>
               <li>青年家园</li>
               <li>免税房源</li>
               <li>满五年唯一免税</li>
           </ul>
         </div>
      </div>
      <div class="ttt">
         <div>
            <span>北京找房无忧 &nbsp; > &nbsp;首页</span>
         </div>
         <div>
            <img src="./imges/apple.png" alt="">
         </div>
         <div>
            <span>iphore</span>
            <span>客户端</span>
         </div>
      </div>
      <div>
         <div>
            <img src="./imges/android.png" alt="">
         </div>
         <div>
            <span>Android</span>
            <span>客户端</span>
         </div>
      </div>
   </div>
</body>
</html>